<template>
	<view style="background-color: #e5e5e5;min-height:1300rpx;">
		<view class="heads">
			<u-row gutter="12" class="header">
				<u-col span="5">
					<image class="user-images" src="/static/aidex/images/truck.png"></image>
					流水号：{{carInfo.lsh}}
				</u-col>
				<u-col span="7" style="text-align: right;">
					<span>
						<u-icon name="account" class="u-icon-my"></u-icon>
						{{carInfo.nickname}}
					</span>
					<span style="margin-left: 15rpx;">
						<u-icon name="calendar" class="u-icon-my"></u-icon>
						{{$u.timeFormat(carInfo.createtime, 'yyyy年mm月dd日')}}
					</span>

				</u-col>
			</u-row>
		</view>


		<view class="mytabs">
			<u-tabs :list="photos" name="categoryTitle" :is-scroll="false" :bold="true" :current="current"
				@change="change"></u-tabs>
		</view>

		<view v-for="(items,i) in photos" v-if="current==i">
			<!-- 分类 -->

			<view v-for="(item,p) in items.items" class="editor u-form-item ">

				<view class="itemTitle" style="display: flex;">
					<view style="width: 20rpx;">
						<text style="color: red;" v-if="item.required">*</text>
					</view>
					{{p+1}}.{{item.categoryTitle}}
				</view>


				<view class="showImg" v-for="(p,i1) in item.photos">

					<u-icon name="close-circle-fill" color="red" size="30" class="delBtn"
						@click="showModel(i,i1,item.categoryName)"></u-icon>

					<u-image :src="p.thumbFileUrl" :fade="true" duration="450" mode="aspectFill"
						@click="imgPreview(i1,item.photos)" style="display: table-cell;vertical-align: middle;">
						<u-loading slot="loading"></u-loading>
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
				</view>

			<!-- 	<u-loading slot="loading"></u-loading>
				<view slot="error" style="font-size: 24rpx;">加载失败</view>
				</u-image> -->

				<u-upload style="display: inline-block;" :show-upload-list="false" :action="action" :show-tips="false"
					:header="header" :index="item.categoryName" @on-uploaded="onUploaded" @on-success="onSuccess"
					@on-remove="onRemove">
				</u-upload>
			</view>
			<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		</view>
	</view>

</template>


<script>
	export default {
		data() {
			return {
				current: 0,
				categoryName: '',
				id: null, //从url传过来的id
				carInfo: [],
				photos: [], //用于便利所有信息
				userinfo: null,
				lsh: '',
				header: {
					Accept: 'application/json, text/plain, */*',
					ContentType: 'multipart/form-data',
					Authorization: this.$store.state.vuex_token
				},
				action: this.$u.http.config.baseUrl + '/common/upload', //你的图片服务器地址
				rules: {
					kzqfile: [{
						required: true,
						message: '请上传装配'
					}]
				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			imgPreview(index, photos) {
				var urls = new Array();
				for (var i = 0; i < photos.length; i++) {
					urls.push(photos[i].url)
				}
				uni.previewImage({
					current: index, //为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
					indicator: "default", //图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。
					loop: true,
					urls: urls,

				})
			},
			getCarInfo(id) {

				var phoArr = new Array();
				this.$u.api.energy.getCars({
						id: id
					})
					.then(res => {
						var photoArr = new Array();
						this.carInfo = res.data
						this.photos = JSON.parse(res.data.photos)
					});

			},
			//图片上传成功时触发 data为服务器返回的数据，name为通过props传递的index参数
			onSuccess(data, index, lists, name) {


			},
			//name为通过props传递的index参数
			onRemove(index, lists, name) {
				let photos = this.$u.deepClone(this.photos);
				for (var i = 0; i < photos.length; i++) {
					if (photos[i].categoryName == name) {
						photos[i].photos.splice(index, 1)
					}
				}
				this.photos = photos
				this.edit()
			},
			onRemoves() {
				let photos = this.$u.deepClone(this.photos);
				for (var i = 0; i < photos.length; i++) {
					if (photos[i].categoryName == this.categoryName) {
						photos[i].photos.splice(this.index, 1)
					}
				}
				this.photos = photos
				this.edit()
			},
			showModel(index, i1, name) {
				var self = this;
				uni.showModal({
					title: '提示',
					content: '是否要删除此照片？',
					success: function(res) {
						if (res.confirm) {
							let photos = self.$u.deepClone(self.photos);
							for (var i = 0; i < photos[index].items.length; i++) {
								if (photos[index].items[i].categoryName == name) {
									photos[index].items[i].photos.splice(i1, 1)
								}
							}
							self.photos = photos
							self.edit()

						}
					}
				});


				// this.index=index
				// this.categoryName=name
				// this.show = true;

			},
			onUploaded(lists, name) {



				var p1 = 0;
				var p2 = 0;
				let photos = this.$u.deepClone(this.photos);

				for (var q = 0; q < photos.length; q++) {
					for (var i1 = 0; i1 < photos[q].items.length; i1++) {
						if (photos[q].items[i1].categoryName == name) {

							p1 = q;
							p2 = i1;
						}
					}
				}
				
		
				//将上传的图片信息从lists中通过师傅含有response属性解析出来
	

console.log(lists)

				for (var i = 0; i < lists.length; i++) {
					if (lists[i].hasOwnProperty("response")) {
						var photoInfo = {
							fileName: lists[i].response.fileName,
							newFileName: lists[i].response.newFileName,
							originalFilename: lists[i].response.originalFilename,
							thumbFile: lists[i].response.thumbFile,
							thumbFileUrl: lists[i].response.thumbFileUrl,
							url: lists[i].response.url
						}	
					}
				}
				photos[p1].items[p2].photos.push(photoInfo)
				console.log(photos[p1].items)
				this.photos = photos
				this.edit()
			},

			beforeUpload(index, list) {
				return true
			},
			onError(res, index, lists, name) {
				console.log(res)
			},
			onReady() {

			},
			submit() {
				this.edit()
			},
			edit() {

				var photos = JSON.stringify(this.photos)


				this.$u.api.energy.editPho({
						id: this.id,
						photos,
						uid: this.userinfo.userId,
						nickname: this.userinfo.nickName,
						createtime: new Date().toISOString().slice(0, 10)
					})
					.then(res => {
						if (res.code == 200) {
							this.lsh = ""
							this.photoList = ""
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false
							});
						}
					});



			},


			getUserInfo() {
				this.userinfo = this.vuex_user
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数

			this.getCarInfo(option.id)
			this.id = option.id
			this.getUserInfo();

		}
	}
</script>

<style scoped lang="scss">
	.mytabs {
		margin-top: 15rpx;
		padding: 25rpx;
	}

	.heads {
		background-color: #fff;
		margin: 10px 20px 2px 20px;
		padding: 15rpx;
		display: flex;
		color: #999;

		.header {
			font-size: 20rpx;
			width: 100%;
		}
	}

	.showTitle {
		margin: 15rpx 0;
		color: $u-content-color;
		font-size: 22rpx;
	}

	.addForm {
		padding: 10rpx;

		.u-form-item {
			background-color: #fff;
			margin: 15rpx 25rpx 5rpx 25rpx;
			padding: 15rpx;
			border-radius: 3rpx;
			box-shadow: 3px 3px 3px #999;
			font-size: 16px;
		}

	}


	.editor {
		background-color: #fff;
		margin: 15rpx 25rpx 5rpx 25rpx;
		padding: 15rpx;
	}

	.user-images {
		width: 28px;
		height: 28px;
		margin-right: 8px;
		margin-bottom: -8px;
	}

	.u-icon-my {
		background: #c3e9e5;
		width: 28px;
		height: 28px;
		border-radius: 14px;
		text-align: center;
		padding: 0 0 2px 5px;
		margin-right: 6rpx;
		color: #2ac2b8;
	}

	.u-form-item {
		background-color: #fff;
		margin: 15rpx 25rpx 5rpx 25rpx;
		padding: 15rpx;
		border-radius: 3rpx;
		box-shadow: 3px 3px 3px #999;
		font-size: 16px;

		.itemTitle {
			margin: 15rpx 0;
			color: $u-main-color;
			font-size: 30rpx;
		}
	}

	.showImg {
		float: left;
		border-radius: 10rpx;
		border: 1px solid #e5e5e5;
		padding: 4rpx;
		box-shadow: 5px 5px 5px #d5d5d66b;
		width: 200rpx;
		height: 200rpx;
		margin: 5rpx;
		background-color: #f4f5f6;
		display: table;
	}

	.delBtn {
		position: absolute;
		z-index: 10;
		margin-left: 140rpx;
		margin-top: 5px;
		background-color: #fff;
		border-radius: 20px;
		box-shadow: 2px 2px 8px red;
	}
</style>
